<template>
	<view class="j-invitation">
		<status-bar></status-bar>
		<!-- 导航栏 -->
		<view class="j-i-nav">
			<view class="j-i-title">邀请好友</view>
			<view class="hxf hxf-zuobian" @click="back"></view>
		</view>

		<!-- 头像 -->
		<view class="j-i-code-h">
			<view class="j-i-code-h-img"><image :src="userInvitationInfo.hidPic ? userInvitationInfo.hidPic : 'http://s499jfz9e.hb-bkt.clouddn.com/store/me/j-m-user.png'"></image></view>
			<view class="j-i-code-h-nickname">{{ userInvitationInfo.nickName ? userInvitationInfo.nickName : '' }}</view>
		</view>

		<!-- 二维码区域 -->
		<view class="j-i-code">
			<view class="j-i-code-bg">
				<!-- 二维码图片 -->
				<view class="j-i-code-c-image">
					<view class="j-i-code-c-i"><image :src="'data:image/png;base64,' + userInvitationInfo.inviteQrCode"></image></view>
				</view>
				<!-- 邀请您加入智创 -->
				<view class="j-i-i-text">邀请您加入智创</view>
				<!-- 邀请码标题样式 -->
				<view class="j-i-i-title">
					<view class="j-i-i-line"></view>
					<view class="j-i-i-text">邀请码</view>
					<view class="j-i-i-line"></view>
				</view>
				<!-- 邀请码号 -->
				<view class="j-i-i-num">{{ userInvitationInfo.inviteCode ? userInvitationInfo.inviteCode : '------' }}</view>
				<!-- 复制邀请 -->
				<view class="j-i-i-btn"><u-button class="j-i-i-copy" @click="copyInvitationCode">复制邀请码</u-button></view>
			</view>
		</view>
		<view class="j-i-code-save"><u-button class="j-i-i-copy" @click="saveImage">保存到相册</u-button></view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInvitationInfo: {}
		};
	},
	onLoad() {
		// 用户-获取当前登录用户的邀请码信息
		this.postGetUserInviteCode();
	},
	methods: {
		// 保存图片到相册
		saveImage() {
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			var bitmap = null;
			var currentWebview = page.$getAppWebview();
			bitmap = new plus.nativeObj.Bitmap('amway_img');
			// 将webview内容绘制到Bitmap对象中
			currentWebview.draw(
				bitmap,
				function() {
					console.log('截屏绘制图片成功');
					bitmap.save(
						'_doc/a.jpg',
						{},
						function(i) {
							// console.log('保存图片成功：' + JSON.stringify(i));
							uni.saveImageToPhotosAlbum({
								filePath: i.target,
								success: function() {
									bitmap.clear(); //销毁Bitmap图片
									uni.showToast({
										title: '保存图片成功',
										mask: false,
										duration: 1500
									});
								}
							});
						},
						function(e) {
							console.log('保存图片失败：' + JSON.stringify(e));
						}
					);
				},
				function(e) {
					console.log('截屏绘制图片失败：' + JSON.stringify(e));
				}
			);
			//currentWebview.append(amway_bit);
		},
		// 用户-获取当前登录用户的邀请码信息
		postGetUserInviteCode() {
			this.$u.api
				.postGetUserInviteCode()
				.then(res => {
					console.log(res);
					this.userInvitationInfo = res.data;
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 复制邀请码
		copyInvitationCode() {
			uni.setClipboardData({
				data: this.userInvitationInfo.inviteCode,
				success: () => {}
			});
		},
		// 返回
		back() {
			uni.navigateBack();
		}
	}
};
</script>

<style scoped lang="scss">
.j-invitation {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	padding-bottom: 50rpx;
	background: linear-gradient(0deg, rgba(255, 211, 67, 1), rgba(255, 198, 57, 1));

	.j-i-code {
		position: relative;
		margin-top: -118rpx;
		padding: 0 74rpx;
		z-index: 1;

		.j-i-code-bg {
			padding-top: 130rpx;
			padding-bottom: 50rpx;
			background-color: #ffffff;
			border-radius: 14rpx;

			.j-i-code-c-image {
				display: flex;
				align-items: center;
				justify-content: center;

				.j-i-code-c-i {
					width: 368rpx;
					height: 368rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.j-i-i-text {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #4f4f4f;
				margin-top: 12rpx;
			}

			.j-i-i-title {
				display: flex;
				align-items: center;
				margin-top: 55rpx;
				justify-content: center;

				.j-i-i-line {
					height: 1rpx;
					width: 150rpx;
					background-color: #f1f1f1;
				}

				.j-i-i-text {
					color: #4f4f4f;
					margin: 0 30rpx;
				}
			}

			.j-i-i-num {
				color: #333333;
				text-align: center;
				font-size: 38rpx;
				font-weight: bold;
				margin-top: 15rpx;
			}

			.j-i-i-btn {
				display: flex;
				justify-content: center;

				.j-i-i-copy {
					width: 192rpx;
					height: 65rpx;
					color: #797979;
					margin-top: 24rpx;

					&:after {
						border-color: #797979;
					}
				}
			}
		}
	}

	.j-i-code-save {
		padding: 37rpx 74rpx;

		.j-i-i-copy {
			color: #ffffff;
			background-color: rgba(0, 0, 0, 0);

			&:after {
				border-color: #ffffff;
			}
		}
	}

	.j-i-code-h {
		height: 200rpx;
		position: relative;
		display: flex;
		margin-top: 68rpx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 2;

		.j-i-code-h-img {
			width: 116rpx;
			height: 116rpx;
			border-radius: 50%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.j-i-code-h-nickname {
			color: #797979;
			font-size: 32rpx;
			margin-top: 15rpx;
		}
	}

	.j-i-nav {
		position: relative;
		display: flex;
		height: 88rpx;
		align-items: center;
		padding: 0 30rpx;
		justify-content: center;

		.j-i-title {
			color: #333333;
			font-size: 35rpx;
		}

		.hxf-zuobian {
			position: absolute;
			left: 20rpx;
			font-size: 50rpx;
			color: #333333;
		}
	}
}
</style>
